<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="w65 ma p05">
				<div class="pb1">
					<div style="margin-bottom: 1rem;">
						<el-row type="flex" class="row-bg" justify="space-between">
							<el-col :span="8">
								<img class="vatb plr07" src="../../assets/index/catalogue.png" alt="" />
								<span class="c2b fwb fz103 ls03">地质科普</span>
							</el-col>
							<el-col :span="8">
								<div style="display: flex;">
									<el-input
										style="width: 20rem;margin: 0 0.5rem 0 1rem;"
										clearable
										suffix-icon="el-icon-search"
										v-model="queryParams.content"
										placeholder="请输入内容"
									></el-input>
									<el-button class="bgc2f6 cfff" @click="seach">搜索</el-button>
								</div>
							</el-col>
						</el-row>
					</div>
					<el-card class="box-card">
						<div class="standardList" v-loading="loading" element-loading-text="拼命加载中">
							<el-row
								:gutter="20"
								style="border-bottom: #eeeeee 1px solid; padding: 1rem 0; box-sizing: border-box;"
								v-for="(item, index) in getGeologyList"
								:key="index"
							>
								<el-col :span="6"><img style="width: 16.5rem;height: 8.5rem;" :src="getImg(item.image)" alt="" /></el-col>
								<el-col :span="17">
									<el-row :gutter="20">
										<el-col :span="21" class="fwb fz103">{{ item.title }}</el-col>
										<el-col :span="3"><el-button type="primary" @click="viewsDetails(item.id)" round plain>查看详情</el-button></el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :offset="0" class="c999 fz05 pt05" style="height: 3rem;">关键字：{{ item.intro }}</el-col>
									</el-row>
									<el-row :gutter="20" class="pt1">
										<el-col :span="19" class="fz05">
											<el-tag color="#2f6bbb" size="small" v-if="item.type == 1">城市地质</el-tag>
											<el-tag color="#cb5d1e" size="small" v-if="item.type == 2">地热资源</el-tag>
											<el-tag color="#00e7aa" size="small" v-if="item.type == 3">区域海洋</el-tag>
										</el-col>
										<el-col :span="5" class="fz05">{{ formatDate(item.create_time) }}</el-col>
									</el-row>
								</el-col>
							</el-row>
						</div>
						<div class="tar">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="queryParams.pageSize"
								background
								layout="total, sizes, prev, pager, next, jumper"
								:total="count"
							></el-pagination>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { geology } from '@/api/resourceCenter.js';
import defaultImg from '@/assets/defaultImg.png';
export default {
	name: 'realTime',
	components: {
		breadcrumb
	},
	data() {
		return {
			loading: false,
			getGeologyList: [],
			count: null,
			queryParams: {
				pageSize: 10,
				page: 1,
				type: 1,
				content: null
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			geology(this.queryParams).then(res => {
				this.loading = false;
				this.getGeologyList = res.data.arr;
				this.count = res.data.count;
			});
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.queryParams.page = val;
			this.getList();
		},
		getImg(val) {
			if (val == null) {
				return defaultImg;
			} else {
				return this.url + val;
			}
		},
		seach() {
			this.getList();
		},
		viewsDetails(id) {
			this.$router.push({
				path: '/realTimeDetails',
				query: {
					id: id
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	background-color: #ffffff;
}
// .el-card {
// 	margin-top: 0.5rem;
// 	padding: 1rem;
// 	height: 28rem;
// 	overflow-y: auto;
// }
.standardList {
	height: 61rem;
	overflow-y: auto;
}
// /deep/.el-card__body {
// 	padding: 0.1rem 0;
// }
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
.el-tag {
	background-color: #00a0e9;
	color: #ffffff;
	margin-right: 1rem;
}
.el-button--primary.is-plain {
	color: #007fb5;
	border-color: #007fb5;
	background-color: #ffffff;
}
</style>
